react draft api 简介

draft.js api
https://draftjs.org/docs/quic...

基础API

这个文档提供了一些基础的draftapi概览。

Controlled Input

Editor组件构建了一个可控的可编辑的组件。这个组件提供了一个顶级api模型与react的可控Input组件相似的api.
做一个简短的回顾，可控input组件包括两个关键：
1.一个value代表input的状态
2.一个onChange函数属性，使input更新。
这个方法允许组合input组件来严格控制Input的状态，于此同时仍然允许更新DOM来展示用户已经输入的信息。
顶级的组件能通过value属性的state值来保持控制输入状态。

Controlling Rich Text

在react富文本脚本中有两个显著的问题：
1.一段纯文本不足以展示富文本编辑器的复杂状态
2.在可编辑的元素总，没有像onChange的这样的事件可用。
State因此被表示为一个不可变的EditorState对象。并且onChange被Editor的内部代码实现来提供一个state的值给上层。
这个EditorState对象是一个复杂的Editor的 state的快照。包括内容，光标和撤消/重做历史记录。所有在编辑器内部对内容和选择的修改都会创建一个新的EditorState对象。请注意，由于不可变对象上的数据持续存在，这仍然是有效的。
对于在编辑器DOM中发生的任何编辑或选择更改，您的onChange处理程序将根据这些更改使用最新的EditorState对象执行。

Rich Styling

现在我们已经确定了基本的顶层api，我们可以进一步的思考怎么可以给Draft编辑器添加一些基本的样式。

EditorState: Yours to Command

以前的文章介绍了EditorState对象作为编辑器的完整状态的快照，由编辑器核心通过onChange支持提供。
然而，你的顶层的React组件是负责维护状态的，你还可以以任何你认为合适的方式将更改应用于该EditorState对象。
对于inline和block样式，例如，RichUntils模块提供了一些可用的方法来帮助操作这些状态。
相似的，Modifier模块也提供了一些常见的操作来使你的编辑生效，包括对文本，样式的修改等等。这个模块是一系列由更小的，更简单的编辑函数组成的编辑函数来返回所需的EditorState对象。
对于这个例子，我们将坚持使用RichUtils来演示如何在顶级组件中应用基本的丰富样式。

RichUtils and Key Commands

RichUtils 有一些对于web编辑器来说可用的核心关键命令，例如： Cmd+B (加粗), Cmd+I (斜体), 等等.
我们可以观察并且处理关键命令通过我们可以通过handleKeyCommand prop来观察和处理关键命令，并将它们绑定到RichUtils中以应用或删除所需的样式。

handleKeyCommand
传给handleKeyCommand的command参数是一个字符串值，即需要被运行命令的名字。这是从DOM键盘事件映射的。

Styling Controls in UI

在React组件中，你可以添加按钮或者其他的控制来允许用户在编辑器中修改文本样式。